<template>

    <div style="background-color:rgb(228,228,228) ; width:100%;height:618px"> 

        <div style="padding-top:80px;padding-left:20px">
            
            <el-avatar :size="60"  >头像{{ workUser.icon }}</el-avatar> 
           
            
        </div>

        <div style="padding-left:95px;margin-top:-58px">
            <b style="font-size:16px">{{ workUser.name }}</b>
            </div>

            <div style="padding-left:95px;margin-top:5px">
                <i class="el-icon-phone"></i> &nbsp;
            <b style="font-size:14px">{{ phone }}</b>
            </div>


        <div style="padding-top:13px;">
                <p style="background-color:white;padding-top:12px;padding-bottom:12px;padding-left:30px;font-size:15px ">
                    登录密码
                    <span style="padding-left:200px"><el-button type="text" @click="updateData" ><b style="font-size:15px">修改></b></el-button></span>

                </p>
        </div>

        <div >
                <p style="background-color:white;padding-top:12px;padding-bottom:12px ">
                    
                    <span style="padding-left:150px"><el-button type="text" @click="logout" ><b style="font-size:15px">退出登录</b></el-button></span>

                </p>
        </div>


          <!-- 修改密码弹出框 -->
          <el-dialog title="修改密码"  :visible.sync="dialogFormUpDate" width="80%">
            <el-form >
                <el-form-item label="手机号"  :label-width="formLabelWidth">
                <span style="color:red" >{{ phone }}</span>
                </el-form-item>
                <el-form-item label="新密码"  :label-width="formLabelWidth">
                <el-input type="password" v-model="newPassword" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormUpDate = false">取 消</el-button>
                <el-button type="primary" @click="updatePasswordByPhone">确 定</el-button>
            </div>
         </el-dialog>
        
    </div>
    
  
</template>

<script>

export default {
    data(){
        return{
            phone:'',
            dialogFormUpDate: false,
            formLabelWidth:'100px',
            newPassword:'',
            workUser:[ {icon:'',
                       name:''
                    }]
        }
    },
    methods:{
        //打开修改密码弹出框
        updateData(){
            this.dialogFormUpDate = true;
            this.newPassword='';
        },
        
        //修改密码
        updatePasswordByPhone(){
        this.phone = sessionStorage.getItem("phone");
           this.$confirm('此操作将修改您的密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true,
            type: 'warning'
            }).then(() => {
            this.$axios.get('/api/app/updatePasswordByPhone?phone='+this.phone+"&password="+this.newPassword)
            .then(res=>{
                console.log(res.data);  
                if(res.data.code == 200){
                  this.$router.push("sortingLogin");
                  this.$message({
                type: 'success',
                duration:2000,
                message: '修改密码成功!'
            });
             }
          });
                
          }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消修改密码'
            })          
            });  

        },
        logout(){
            this.$confirm('此操作将退出登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true,
            type: 'warning'
            }).then(() => {
            //删除sessionStroge里的数据
            sessionStorage.removeItem("phone");
            //跳转到登录页
            this.$router.push("sortingLogin");
                  this.$message({
                type: 'success',
                duration:2000,
                message: '操作成功,请重新登录!'
            });
                   
          }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消操作'
            })          
            });  
        },
        queryWorkUser(){
            this.phone = sessionStorage.getItem("phone");
            this.$axios.get('/api/app/queryWorkUser?phone='+this.phone)
            .then(res=>{
                if(res.data.code== 200){
                    this.workUser = res.data.data;
                    console.log(this.workUser);

                }
            })
        }


    },
    created(){
        this.phone = sessionStorage.getItem("phone");
        this.queryWorkUser();

    }

}
</script>

<style scoped>

</style>